<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style" />
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row>
      <Card>
        <div class="search-con search-con-top">
          <Input @on-change="handleClear" clearable placeholder="输入所要查询的年份" class="search-input" v-model="searchValue" /> 年
          <Button type="primary" style="margin-left: 1.5625rem;" @click="onClick"> 查询 </Button>
        </div>
        <div>
          <tables ref="selection" stripe v-model="tableData" :columns="columns" />
        </div>

      </Card>
    </Row>
  </div>

</template>

<script>
  import {
    doCustomTimes
  } from '@/libs/util'
  import Tables from '_c/tables'
  import InforCard from '_c/info-card'
  import CountTo from '_c/count-to'
  import {
    ChartPie,
    ChartBar
  } from '_c/charts'
  export default {
    name: 'home',
    components: {
      Tables,
      InforCard,
      CountTo,
      ChartPie,
      ChartBar
    },
    data() {
      return {
        tableData: [],
        columns: [{
            title: '月份',
            // key: 'CarBrandandModel',
            key: 'month',
            width: 150,
          },
          {
            title: '保养',
            // key: 'CarBrandandModel',
            key: '5f36068356391c0001ba1eec',
            width: 150,
          },
          {
            title: '维修',
            // key: 'PlateNum',
            key: '5f36068356391c0001ba1ee9',
            width: 150,
            editable: true
          }, {
            title: '装潢',
            key: 'ExPlateNum',
            width: 150,
            editable: true
          }, {
            title: '轮胎',
            key: 'ExPlateNum',
            width: 150,
            editable: true
          }, {
            title: '电瓶',
            key: 'ExPlateNum',
            width: 150,
            editable: true
          }, {
            title: '随车工具',
            key: 'ExPlateNum',
            width: 150,
            editable: true
          }, {
            title: '维修汇总',
            key: 'ExPlateNum',
            width: 150,
            editable: true
          }, {
            title: '保险',
            key: 'ExPlateNum',
            width: 150,
            editable: true
          }, {
            title: '小计',
            key: 'ExPlateNum',
            width: 150,
            editable: true
          }
        ],
        inforCardData: [{
            title: '保养',
            icon: 'md-person-add',
            count: 803,
            color: '#2d8cf0'
          },
          {
            title: '维修',
            icon: 'md-locate',
            count: 232,
            color: '#19be6b'
          },
          {
            title: '装潢',
            icon: 'md-help-circle',
            count: 142,
            color: '#ff9900'
          },
          {
            title: '轮胎',
            icon: 'md-share',
            count: 657,
            color: '#ed3f14'
          },
          {
            title: '电瓶',
            icon: 'md-chatbubbles',
            count: 12,
            color: '#E46CBB'
          },
          {
            title: '随车工具',
            icon: 'md-map',
            count: 14,
            color: '#9A66E4'
          }
        ],
        pieData: [{
            value: 335,
            name: '直接访问'
          },
          {
            value: 310,
            name: '邮件营销'
          },
          {
            value: 234,
            name: '联盟广告'
          },
          {
            value: 135,
            name: '视频广告'
          },
          {
            value: 1548,
            name: '搜索引擎'
          }
        ],
        barData: {
          Mon: 13253,
          Tue: 34235,
          Wed: 26321,
          Thu: 12340,
          Fri: 24643,
          Sat: 1322,
          Sun: 1324
        }
      }
    },
    methods: {
      onClick() {

      }
    },
    mounted() {
      //
      doCustomTimes(12, (index) => {
        this.tableData.push({
          month: index + 1 + "月"
        })
      })
    }
  }
</script>

<style lang="less">
  .count-style {
    font-size: 50px;
  }
</style>
